{% extends "student/base.html" %}
{% block leftbox %}
{% endblock %}
{% block extracss %}
    <link href="{{ STATIC_URL }}web/Plugins/css/main.css" rel="stylesheet" type="text/css"/>
    <style>
    #cont0,#cont1,#cont2{
        margin: 2px;
        padding: 10px;
    }
</style>
{% endblock %}

{% block main %}
    <div>
        <div id="calhead" style="padding-left:1px;padding-right:1px;">
            <div class="cHead">
                <div class="ftitle">我的成绩</div>
            </div>

            <div id="cont0" style="height: 300px"></div>
            <div id="cont1" style="height: 300px"></div>
            <div id="cont2" style="min-width:400px;height:400px;"></div>
        </div>
    </div>
{% endblock %}

{% block extrajs %}
    <script>
        $(function () {
            $('#cont0').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: '{{ user.user}}同学的成绩单'
                },
                subtitle: {
                    text: '2017年6月'
                },
                xAxis: {
                    categories: ['出勤率', '学习态度', '作业', '小测验', '单元测试', '期中考试', '期末考试'],
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    floor: 50,
                    ceiling: 100,
                    title: {
                        text: '成绩分数'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: '语文',
                    data: [100, 100, 93, 87, 83, 93, 90]
                }, {
                    name: '外语',
                    data: [99, 90, 90, 85, 88, 93, 92]
                }, {
                    name: '数学',
                    data: [100, 95, 67, 79, 75, 93, 94]
                }, {
                    name: '化学',
                    data: [100, 98, 81, 84, 85, 90, 87]
                }, {
                    name: '生物',
                    data: [100, 97, 89, 79, 73, 80, 85]
                }, {
                    name: '物理',
                    data: [100, 99, 90, 84, 83, 82, 94]
                }
                ]
            });
        });

        $(function () {
            $('#cont1').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: '班级平均成绩对比'
                },
                subtitle: {
                    text: '2017年6月'
                },
                xAxis: {
                    categories: ['出勤率', '学习态度', '作业', '小测验', '单元测试', '期中考试', '期末考试'],
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    floor: 50,
                    ceiling: 100,
                    title: {
                        text: '成绩分数'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: '语文',
                    data: [99, 100, 93, 87, 83, 93, 90]
                }, {
                    name: '外语',
                    data: [99, 90, 90, 85, 88, 93, 92]
                }, {
                    name: '数学',
                    data: [99, 80, 67, 79, 75, 93, 94]
                }, {
                    name: '化学',
                    data: [99, 82, 81, 84, 85, 90, 87]
                }, {
                    name: '生物',
                    data: [100, 97, 89, 79, 73, 80, 85]
                }, {
                    name: '物理',
                    data: [100, 99, 90, 84, 83, 82, 94]
                }
                ]
            });
        });

        $(function () {
            $('#cont2').highcharts({
                chart: {
                    type: 'spline'
                },
                title: {
                    text: '年度成绩趋势'
                },
                subtitle: {
                    text: '2017年6月更新'
                },
                xAxis: {
                    categories: ['九月', '十月', '十一月', '十二月', '一月', '二月', '三月', '四月', '五月', '六月', '七月']
                },
                yAxis: {
                    title: {
                        text: '成绩'
                    }
                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true          // 开启数据标签
                        },
                        enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                    }
                },
                series: [{
                    name: '语文',
                    data: [92, 89, 93, 87, 83, 93, 90, 88, 86, 83, 87]
                }, {
                    name: '外语',
                    data: [90, 92, 91, 87, 86, 88, 93, 95, 92, 90, 93]
                }, {
                    name: '数学',
                    data: [85, 87, 90, 83, 91, 91, 94, 89, 88, 92, 89]
                }, {
                    name: '化学',
                    data: [92, 89, 93, 91, 82, 84, 88, 81, 85, 87, 83]
                }, {
                    name: '生物',
                    data: [79, 76, 80, 81, 78, 74, 76, 77, 82, 84, 80]
                }, {
                    name: '物理',
                    data: [82, 84, 89, 87, 86, 82, 82, 85, 87, 85, 87]
                }]
            });
        });


    </script>

{% endblock %}